<template>
  <d2-container>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <div class="d2-breadcrumb">
        <el-breadcrumb-item>园区管理</el-breadcrumb-item>
        <el-breadcrumb-item>编辑园区</el-breadcrumb-item>
      </div>
    </el-breadcrumb>
    <el-form
      label-width="100px"
      :model="query"
      :rules="rules"
      ref="add"
      label-position="top"
    >
      <!-- card 1 -->
      <el-card>
        <div class="title-box">基本信息</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="园区名称" prop="gardenName">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.gardenName"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="园区类型"
              prop="gardenType"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-select
                v-model="query.gardenType"
                placeholder="请选择"
                style="width: 80%"
              >
                <el-option label="园区" :value="1"></el-option>
                <el-option label="写字楼" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="园区介绍"
              prop="text"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.text"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 2 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="园区联系人姓名"
              prop="gardenContacts"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.gardenContacts"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="园区联系方式"
              prop="gardenPhone"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
              maxlength="11"
                placeholder="请输入"
                type="text"
                v-model.trim="query.gardenPhone"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="地址(省)"
              prop="province"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.province"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 3 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="地址(市)"
              prop="city"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.city"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="地址(县/区)"
              prop="county"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.county"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="上架状态"
              prop="shelfStatus"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-select
                v-model="query.shelfStatus"
                placeholder="请选择"
                style="width: 80%"
              >
                <el-option label="未上架" :value="0"></el-option>
                <el-option label="上架" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="推荐状态"
              prop="recommend"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-select
                v-model="query.recommend"
                placeholder="请选择"
                style="width: 80%"
              >
                <el-option label="未推荐" :value="0"></el-option>
                <el-option label="推荐" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="详细地址"
              prop="address"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.address"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="办公面积"
              prop="floorage"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.number="query.floorage"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="竣工时间"
              prop="builtTime"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-date-picker
                v-model="query.builtTime"
                type="date"
                placeholder="选择日期时间"
                style="width: 80%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="停车位"
              prop="parkingSpace"
              :rules="[
                { required: true, message: '字段不能为空' },
                { type: 'number', message: '字段必须为数字值' },
              ]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.number="query.parkingSpace"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="产权年限"
              prop="years"
              :rules="[
                { required: true, message: '字段不能为空' },
                { type: 'number', message: '字段必须为数字值' },
              ]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.number="query.years"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="经度"
              prop="longitude"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.longitude"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="纬度"
              prop="latitude"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.latitude"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="园区标签"
              prop="gardenLabel"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入，多标签请用;隔开"
                type="text"
                v-model.trim="query.gardenLabel"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="视频路径"
              prop="videoUrl"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.videoUrl"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="内容图片" prop="contentPicture">
              <img-upload
                tip="建议:图片小于1M"
                v-model="query._contentPicture"
                :limit="10"
                listType="picture-card"
              ></img-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="封面图片" prop="indexImage">
              <img-upload
                tip="建议:图片小于1M"
                v-model="query._indexImage"
                :limit="10"
                listType="picture-card"
              ></img-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8"> </el-col>
        </el-row>
      </el-card>
      <!-- card 2 -->
      <el-card style="margin: 20px 0">
        <div class="title-box">
          配套信息

          <el-button
            type="text"
            class="add-btn"
            @click="query._gardenServerId.push('')"
            >新增</el-button
          >
        </div>
        <!-- row 1 -->
        <div class="card-box">
          <el-form-item
            :label="`配套 ${index + 1}`"
            class="item-box"
            v-for="(item, index) in query._gardenServerId"
            :key="index"
          >
            <el-button
              type="text"
              class="item-delete"
              @click="removeMating(index)"
              >删除</el-button
            >
            <el-select
              v-model="query._gardenServerId[index]"
              placeholder="请选择"
              style="width: 80%"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in serveList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-card>
      <!-- card 3 -->
      <el-card style="margin: 20px 0">
        <div class="title-box">补充信息</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="物业公司名称"
              prop="manageCompany"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.manageCompany"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="物业联系人"
              prop="manageName"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.manageName"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="物业联系方式"
              prop="phone"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
              maxlength="11"
                placeholder="请输入"
                type="text"
                v-model.trim="query.phone"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 2 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="物业费用"
              prop="propertyFee"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.propertyFee"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="开发商"
              prop="developers"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.developers"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="电梯"
              prop="elevator"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.elevator"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 3 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="空调"
              prop="airConditioner"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.airConditioner"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="标准层建面"
              prop="standardFloor"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.standardFloor"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="容积率"
              prop="plotRatio"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.plotRatio"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="网络通信"
              prop="network"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入，多条请用;隔开"
                type="text"
                v-model.trim="query.network"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!-- card 4-->
      <el-card style="margin: 20px 0">
        <div class="title-box">
          关联主账号
          <el-button
            type="text"
            class="add-btn"
            @click="query._userIdList.push('')"
            >新增</el-button
          >
        </div>
        <!-- row 1 -->
        <div class="card-box">
          <el-form-item
            :label="index == 0 ? '关联主账号' : '关联副账号'"
            class="item-box"
            v-for="(item, index) in query._userIdList"
            :key="index"
          >
            <el-button
              type="text"
              class="item-delete"
              @click="removeRelevance(index)"
              >删除</el-button
            >
            <el-select
              v-model="query._userIdList[index]"
              placeholder="请选择"
              style="width: 80%"
            >
              <el-option
                :label="item.nickName"
                :value="item.id"
                v-for="(item, index) in userList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="add">保存</el-button>
        </el-form-item>
      </el-card>
    </el-form>
  </d2-container>
</template>
<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      query: {
        _userIdList: [],
        _gardenServerId: [],
      },
      rules: {
        gardenName: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
      },
      userList: [],
      serveList: [],
    };
  },
  methods: {
    add() {
      this.$refs["add"].validate((valid) => {
        if (valid) {
          let params = {
            ...this.query,
            userId: this.query._userIdList[0],
          };
          if (params.builtTime) {
            params.builtTime = new Date(
              Date.parse(new Date(params.builtTime)) + 8 * 3600 * 1000
            );
          }
          if (this.query._userIdList.length > 1) {
            let arr = this.query._userIdList;
            arr = arr.splice(1, arr.length - 1);
            console.log("截取数组", arr);
            params.wxUserIds = arr.join(",");
          }
          //园区服务
          if (this.query._gardenServerId.length > 1) {
            let arr = this.query._gardenServerId;
            params.gardenServerId = arr.join(",");
          }
          console.log("园区服务", params.gardenServerId);
          if (
            this.query._contentPicture &&
            this.query._contentPicture.length > 0
          ) {
            let _img = "";
            for (var i = 0; i < this.query._contentPicture.length; i++) {
              _img += this.query._contentPicture[i].url;
              if (i != this.query._contentPicture.length-1) {
                _img += ",";
              }
            }
            params.contentPicture = _img;
          }
          if (this.query._indexImage && this.query._indexImage.length > 0) {
            let _img = "";
            for (var i = 0; i < this.query._indexImage.length; i++) {
              _img += this.query._indexImage[i].url;
              if (i != this.query._indexImage.length-1) {
                _img += ",";
              }
            }
            params.indexImage = _img;
          }
          console.log("提交内容：", params);
          // return;
          this.$axios.post("/wxGarden/update", params).then((result) => {
            console.log("响应", result);
            if (result.data == 1) {
              this.$message.success("操作成功");
              this.$router.push("/garden");
              this.$refs["add"].resetFields();
            } else {
              this.$message.error(result.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    //删除
    removeRelevance(index) {
      this.query._userIdList.splice(index, 1);
    },
    //删除
    removeMating(index) {
      this.query._gardenServerId.splice(index, 1);
    },
    getInfo() {
      this.$axios.post("/wxGarden/getInfo", { id: this.id }).then((result) => {
        if (result) {
          let arr = [result.data.userId];
          if (result.data.wxUserIds && result.data.wxUserIds.length > 1) {
            let ids = result.data.wxUserIds.split(",");
            arr = arr.concat(ids);
            arr = arr.map((ele) => {
              return ele * 1;
            });
          }

          let _gardenServerId = result.data.gardenServerId.split(",");
          _gardenServerId = _gardenServerId.map((ele) => {
            return ele * 1;
          });
          this.query = {
            ...result.data,
            ...this.query,
            _userIdList: arr,
            _gardenServerId,
            _gardenServerId,
          };

          let _arr1 = result.data.contentPicture.split(",");
          let _arr2 = result.data.indexImage.split(",");
          let _contentPicture = [];
          let _indexImage = [];
          for (var i = 0; i < _arr1.length; i++) {
            _contentPicture.push({
              url: _arr1[i],
            });
          }
          for (var i = 0; i < _arr2.length; i++) {
            _indexImage.push({
              url: _arr2[i],
            });
          }
          this.query._contentPicture = _contentPicture;
          this.query._indexImage = _indexImage;

          console.log("图片",this.query._contentPicture,this.query._indexImage)
        } else {
          this.$message.error(result.data.msg);
        }
      });
    },
    //获取用户列表
    getUserList() {
      let params = {
        pageNum: 1,
        pageSize: 9999999,
      };

      this.$axios.post("/wxUser/list", params).then((result) => {
        if (result) {
          this.userList = result.data.list;
        } else {
          this.$message.error(result.data.msg);
        }
      });
    },
  },
  mounted() {
    this.getInfo();
    this.getUserList();

    this.$axios
      .post("wxGardenServer/list", {
        pageNum: 1,
        pageSize: 9999999,
      })
      .then((result) => {
        this.serveList = result.data;
      });
  },
};
</script>
<style scoped lang="scss">
.item-box {
  position: relative;
  width: 30%;
  .item-delete {
    position: absolute;
    right: 80px;
    top: -45px;
  }
}
.card-box {
  display: flex;
  flex-wrap: wrap;
}
</style>